<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 使用组件 -->
      <PageTools :show-before="true">
        <span slot="before">有0条考勤审批尚未处理</span>
        <template slot="after">
          <el-button size="small" type="danger">导入</el-button>
          <el-badge is-dot style="margin:0 8px">
            <el-button type="warning">提醒</el-button>
          </el-badge>
          <el-button size="small" type="primary">设置</el-button>
          <el-button size="small">历史归档</el-button>
          <el-button size="small" type="primary">202109报表</el-button>
        </template>
      </PageTools>
      <el-card>
        <!-- 使用组件 -->
        <FilterComponent
          :all-list="AllList"
          @filterChange="filterChange"
        />
        <!-- 表格 -->
        <el-table
          border
          :data="pageList"
          style="width: 100%"
        >
          {{ dayList }}
          <el-table-column
            type="index"
            label="序号"
            width="80"
          />
          <el-table-column
            prop="username"
            label="姓名"
            width="80"
          />
          <el-table-column
            prop="workNumber"
            label="工号"
            width="80"
          />
          <el-table-column
            prop="departmentName"
            label="部门"
            width="120"
          />
          <el-table-column
            prop="mobile"
            label="手机"
            width="120"
          />
          <!-- 使用日期数组, 遍历生成三十一列 -->
          <el-table-column
            v-for="(day ,index) in dayList"
            :key="day"
            :label="day.toString()"
            width="90"
          >
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | adtStatu }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          layout="prev,pager,next"
          :total="filterList.length"
          @current-change="currentChange"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import AttendanceEnum from '@/api/constant/attendance'
import { getAttendancesMock } from '@/api/attendances'
import FilterComponent from './components/filter.vue'
export default {
  components: { FilterComponent },
  // 利用枚举数据渲染页面
  filters: {
    adtStatu(id) {
      // 如果为0显示空白
      if (id === 0) {
        return ''
      }
      const obj = AttendanceEnum.holidayType.find(item => Number(item.id) === Number(id))
      return obj ? obj.value : '未知'
    }
  },
  data() {
    return {
      // 枚举数据
      AttendanceEnum,
      // 总数据
      AllList: [],
      // 过滤后的数据
      filterList: [],
      //   dayList: '', // 工作日期
      // 分页
      pageseting: {
        page: 1,
        size: 10
      }
    }
  },
  computed: {
    dayList() {
      if (this.AllList.length === 0) {
        return []
      }
      return this.AllList[0].attendanceRecord.map(item => item.day)
    },
    pageList() {
      // 计算出每页开始数据的下标与结束的下标
      // 用过滤后的数据进行截取获取到每页的数据
      const endIndex = this.pageseting.size * this.pageseting.page
      const startIndex = endIndex - this.pageseting.size
      return this.filterList.slice(startIndex, endIndex)
    }
  },

  async created() {
    // 获取总数据
    this.AllList = await getAttendancesMock()
    console.log(this.AllList)
    // 解决页面进来数据为空的问题
    this.filterList = [...this.AllList]
    // 笨方法
    // const newArr = res.map(item => {
    //   return item.attendanceRecord
    // })
    // newArr.forEach(item => {
    //   this.dayList = item
    // })
  },
  methods: {
    // 获取到筛选后的数据
    filterChange(newlist) {
      this.filterList = newlist
    },
    // 页码改变
    currentChange(newpage) {
      this.pageseting.page = newpage
    }
  }

}
</script>

